<template>
  <div ref="chart" style="width:100%;height:100%;" />
</template>

<script>
import * as echarts from 'echarts'
import { cloneDeep, groupBy } from 'lodash'
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      chartData: [],
      times: [],
      deptNames: [],
      timeer: null
    }
  },
  // watch: {
  //   data: {
  //     handler(v) {
  //       if (Array.isArray(v)) {
  //         const times = []
  //         const deptNames = []
  //         v.map(e => {
  //           times.push(e.exam_time)
  //           deptNames.push(e.DEPT_NAME)
  //         })
  //         this.times = [...new Set(times)].sort(function(a, b) {
  //           return Date.parse(a) - Date.parse(b)
  //         })
  //         this.deptNames = [...new Set(deptNames)]
  //         this.chartData = cloneDeep(v)
  //         this.updateChart()
  //       }
  //     },
  //     immediate: true
  //   }
  // },
  mounted() {
    this.initChart()
    this.timeer = setInterval(this.resizeChart, 500)
    this.updateChart()
  },
  beforeDestroy() {
    clearInterval(this.timeer)
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    updateChart() {
      const _this = this
      this.$nextTick(() => {
        if (this.chart) {
          const series = [{
            name: '车流量',
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260],
            showSymbol: false,
            areaStyle: {
              opacity: 0.2,
              color: 'rgba(24, 144, 255, 1)'
            }
          }]
          this.chart.setOption({
            xAxis: {
              data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00']
            },
            series: series
          })
        } else {
          setTimeout(() => {
            this.updateChart()
            console.log('updateChart')
          }, 10)
        }
      })
    },
    initChart() {
      const option = {
        colors: ['#1890FF'],
        grid: {
          top: '40%',
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          z: 4,
          type: 'category',
          boundaryGap: false
          // axisLine: {
          //   lineStyle: {
          //     color: '#00BCFF'
          //   }
          // }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: false,
            color: '#00F6FF'
          },
          splitLine: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
        ]
      }
      const myChart = echarts.init(this.$refs.chart)
      this.chart = myChart
      myChart.setOption(option)
    }
  }
}
</script>

      <style>
      </style>

